import { Component } from "react";
import axios from 'axios';
import { connect } from "react-redux";
import Topic from "./component/Topic";
import List from "./component/List";
import Recommend from "./component/Recommend";
import Writer from "./component/Writer";
import { HomeWrapper,HomeLeft,HomeRight } from './style'
import banner from '../../statics/banner.png'
import { actionCreators } from "./store";

// UI组件
class Home extends Component {
    render(){
        return(
            <HomeWrapper>
                <HomeLeft>
                    <img className="banner-img" src="//upload.jianshu.io/admin_banners/web_images/5055/348f9e194f4062a17f587e2963b7feb0b0a5a982.png?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540"></img>
                    <Topic />
                    <List />
                </HomeLeft>
                <HomeRight>
                    <Recommend />
                    <Writer/>
                </HomeRight>
            </HomeWrapper>
        )
    }

    componentDidMount(){
        this.props.changeHomeData();
    }
}

// 容器组件
const mapDispatch = (dispatch) => ({
    changeHomeData(){
        const action = actionCreators.getHomeInfo();
        dispatch(action);
    }
})

export default connect(null,mapDispatch)(Home);